<template>
	<view>
		<view class="content">
			<view class="title">忘记密码</view>
			
			<view class="input_wrap">
				<image class="icon" mode="aspectFit" src="../../static/image/public/admin.png"></image>
				<input class="input_insert" type="text" placeholder="请输入手机号码"  v-model="login.userName"  @input="clearInput"/>
				<text class="uni-icon" v-if="showClearIcon" @click="clearIcon">&#xe434;</text>
			</view>
			<view class="input_wrap">
				<image class="icon" mode="aspectFit" src="../../static/image/public/yzm.png"></image>
				<input class="input_insert" type="text" placeholder="请输入验证码" v-model="login.password"/>
				<button class="scode" size="mini" :disabled="btnDis" plain="true" @tap="sendCode">{{btnText}}</button>
			</view>
			<view class="input_wrap">
				<image class="icon" mode="aspectFit" src="../../static/image/public/password.png"></image>
				<input class="input_insert" placeholder="请输入密码" v-model="login.password" :password="showPassword" @input="eyeInput"/>
				<text class="uni-icon" v-if="showEyeIcon" :class="[!showPassword ? 'uni-eye-active' : '']" @click="changePassword">&#xe568;</text>
			</view>
			
			<wyb-button class="btn" :ripple="true" type="filled" color="#31C6DB"
			:radius="radius" width="100%" height="88rpx" font-size="32rpx"
				>确定</wyb-button> 
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radius:["100px"],
				btnDis: false,
				btnText: "获取验证码",
				showClearIcon: false,
				showEyeIcon: false,
				showPassword: true,
				login:{
					userName: null,
					password: null,
				}
			}
		},
		methods:{
				clearInput(e) {
					if (e.detail.value.length > 0) {
					    this.showClearIcon = true;
					} else {
					    this.showClearIcon = false;
					}
				},
				clearIcon() {
				    this.login.userName = "";
				    this.showClearIcon = false;
				},
				eyeInput(e) {
					if (e.detail.value.length > 0) {
					    this.showEyeIcon = true;
					} else {
					    this.showEyeIcon = false;
						this.showPassword = true;
					}
				},
				changePassword() {
				    this.showPassword = !this.showPassword;
				},
				//发送验证码
				async sendCode() {
			// 		let checkRes = graceChecker.check(this.login, formRuleConfig.sendCodeRule);
			// 		if (!checkRes) {
			// 			uni.showToast({
			// 				title: graceChecker.error,
			// 				icon: "none"
			// 			});
			// 			return;
			// 		}
			// 		await this.$api.getMsgCode(this.codeparmas.username);
			
			// 		uni.showToast({
			// 			title: '发送成功'
			// 		});
					// 开启倒计时
					this.countDown();
				},
				// 验证码倒计时
				countDown() {
					let t = null;
					let timer = 60;
					this.btnDis = true;
					clearInterval(t);
					this.btnText = `${timer}s`;
					t = setInterval(() => {
						if (timer == 0) {
							clearInterval(t);
							this.btnText = "重新发送";
							this.btnDis = false;
							return;
						}
						timer--;
						this.btnText = `${timer}s`;
					}, 1000)
				}
			},
		
	}
</script>

<style lang="scss" scoped>
	.content{width: 610rpx;margin: 0 auto;}
	.title{font-size: 46rpx;font-weight: bold;color: #333333;}
	.input_wrap{display: flex;background: #F8F8F8;border-radius: 44px;height: 88rpx;
		align-items: center;margin-bottom: 30rpx;overflow: hidden;
		input{flex: 1;height: 88rpx;line-height: 88rpx;}
	}
	.icon{width: 28rpx;height: 36rpx;margin: 0 36rpx;}
	.input_insert{font-size: 28rpx;}
	.uni-icon {font-family: uniicons;font-size: 40rpx;font-weight: normal;font-style: normal;width: 28rpx;height: 28rpx;line-height: 28rpx;
				color: #dcdcdc;margin: 0 28rpx}
	.scode{border: none;color:#31C6DB ;}
</style>
